<template>
  <f7-block class="mineBlock_box">
    <!-- Swipe to close demo sheet -->
    <f7-sheet
      class="demo-sheet-swipe-to-close backgroundSubColor"
      style="height:auto; --f7-sheet-bg-color: #fff;"
      swipe-to-close
      backdrop
      :opened="sheetOpened"
      @sheet:closed="sheetOpened = false"
    >
      <f7-page-content class="backgroundSubColor">
        <f7-list no-hairlines-md class="backgroundSubColor">
          <f7-list-input
            outline
            label="歌单名称"
            floating-label
            type="text"
            placeholder="Your SongList Name"
            clear-button
            ref="createInput"
            :value="listName"
            @input="listName = $event.target.value"
          >
          </f7-list-input>
          <div style="width:60%;text-align:center;margin:0.1rem auto">
            <f7-button fill sheet-close @click.stop="handleCreate()"
              >完成</f7-button
            >
          </div>
        </f7-list>
      </f7-page-content>
    </f7-sheet>
    <ul>
      <li
        class="li_mine noselect "
        @touchstart="mouseOver"
        @touchend="mouseLeave"
        @click="$f7router.navigate('/songsCard/')"
      >
        <svg-icon iconClass="ic_music" />
        <span class="spanSubColor">我的歌单</span>
      </li>
      <li
        class="li_new noselect "
        @touchstart="mouseOver"
        @touchend="mouseLeave"
        @click.stop="sheetOpened = true"
      >
        <svg-icon iconClass="create_icon" />
        <span class="spanSubColor">添加歌单</span>
      </li>
    </ul>
  </f7-block>
</template>
<script>
import SongsCard from '@/view/songsCard.vue'
import { addSongList } from '@/api/index.js'
import { mapGetters } from 'vuex'
export default {
  components: {
    'v-songsCard': SongsCard,
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
    }),
  },
  data() {
    return {
      sheetOpened: false, //添加歌单弹窗开关
      listName: '', //歌单名称
      queryData: {
        name: '',
      },
    }
  },
  methods: {
    mouseOver(e) {
      console.log(e)
      let originName = e.target.classList[0]
      e.target.className = `${originName} noselect active`
    },
    mouseLeave(e) {
      console.log(e)
      let originName = e.target.classList[0]
      e.target.className = `${originName} noselect`
    },
    //处理添加歌单
    handleCreate() {
      if (this.listName) {
        this.queryData.name = this.listName
        this.queryData.userId = this.getUserInfo.userid
        addSongList(this.queryData)
          .then((res) => {
            if (res.code === 200) {
              this.listName = ''
              this.$f7ready((f7) => {
                var toastTop = f7.toast.create({
                  text: '创建成功',
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()
              })
            }
            else {
              var toastTop = f7.toast.create({
                  text: res.message,
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()
            }
          })
          .catch((err) => {})
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light .sheet-modal {
  $backgroundSubColor: #d4c3c3;
  $spanColor: #212121;
  /deep/ ul {
    background-color: $backgroundSubColor;
    .item-title, input{
      background-color: $backgroundSubColor;
      color: $spanColor;
    }
  }
}
.dark .sheet-modal {
  $backgroundSubColor: #592e2e;

  $spanColor: #ffffff;
  /deep/ ul {
    background-color: $backgroundSubColor;
    .item-title, input {
      background-color: $backgroundSubColor;
      color: $spanColor;
    }
  }
}
.light .mineBlock_box ul {
  $backgroundColor: #d9e7e7;
  $backgroundSubColor: #d4c3c3;
  li {
    background-color: $backgroundSubColor;
  }
  li.active {
    border: 1px #fff7fb solid;
    background-color: $backgroundColor;
  }
}
.dark .mineBlock_box ul {
  $backgroundColor: #212121;
  $backgroundSubColor: #592e2e;
  li {
    background-color: $backgroundSubColor;
  }
  li.active {
    border: 1px #fff7fb solid;
    background-color: $backgroundColor;
  }
}
.mineBlock_box {
  ul {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0;
    .li_new{
      height:0.25rem;
    }
    li {
      border: 1px red solid;
      border-radius: 0.05rem;
      color: #666666;
      height: 1.2rem;
      width: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      // background-color: $backgroundSubColor;
      font-size: 14px;
      font-weight: 600;
      font-family: cursive;
      opacity: 0.6;
      .svg-icon {
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 0.01rem;
      }
    }
  }
}
</style>
